<template>
    <view class="container" :class="{ paddingBottomBar: isShowBottomBar }" v-if="show">
        <header-bar :config="config"></header-bar>
        <view class="order-header"></view>
        <view class="order-main">
            <view class="order-title">
                <text>订单编号：{{ infodata.Sn }}</text>
                <text>订单时间：{{ infodata.OrderTime }}</text>
            </view>
            <view class="order-item-box order-user">
                <view class="location">种类：{{ infodata.ClassNumber }} 数量：{{ infodata.TotalNumber }}</view>
                <view class="user-info">
                    <text class="user-info-name">总计：</text>
                    <text class="user-info-location">¥{{ infodata.OrgPriceSum }}</text>
                </view>
            </view>
            <view class="order-item-box order-items">
                <return-select-item
                    v-for="(item, index) in productData"
                    @changeCheck="changeCheck"
                    @getinputdata="getinputdata"
                    :productData="item"
                    :index="index"></return-select-item>
            </view>
        </view>
        <view class="bottom-bar" v-if="isShowBottomBar">
            <view class="flex">
                <checkbox-group name="allCheck" @change="changeAll">
                    <label class="item-radio custom-checkbox-box flex">
                        <checkbox :value="allCheck.value" class="checkbox-mark" :checked="allCheck.checked" />
                        <custom-checkbox :isSelect="allCheck.checked"></custom-checkbox>
                        <text class="text"> 全选</text>
                    </label>
                </checkbox-group>
            </view>
            <view class="flex_end">
                <view class="flex_culmu">
                    <text v-if="selectData.length > 0"
                        >已选：{{ selectData.length }}种{{ getTemporaryTotalNum }}件</text
                    >
                    <text class="price"
                        >金额：<text>{{ getTotalPrice }}</text
                        >元</text
                    >
                </view>
                <button
                    class="btn btn-success"
                    :class="{ disabled: getSelectData }"
                    :disabled="getSelectData"
                    @click="nextStep">
                    下一步
                </button>
            </view>
        </view>
    </view>
</template>

<script>
import returnSelectItem from "@/pages_shop/components/return/return-select-item.vue"
import customCheckbox from "@/components/common/custom-checkbox.vue"
import { getOrderDetail } from "@/service/api/order.js"
import { AddRefundOrderAction, GetOrderDetailListOnRefund } from "@/service/api/exChange.js"

export default {
    components: {
        returnSelectItem,
        customCheckbox,
    },
    data() {
        return {
            config: {
                title: "商品选择",
                centerSlot: true,
            },
            show: false,
            isShowBottomBar: false,
            allCheck: {
                name: "全选",
                value: "all",
                checked: false,
            },
            productData: [],
            infodata: {},
            selectData: [],
            userId: 0,
        }
    },
    computed: {
        getSelectData() {
            if (this.selectData.length > 0) {
                return false
            } else {
                return true
            }
        },
        getTemporaryTotalNum() {
            let num = 0
            this.productData.forEach((e) => {
                if (e.checked) {
                    num += e.Number
                }
            })
            return Number(num).toFixed(2)
        },
        getTotalPrice() {
            let num = 0
            this.productData.forEach((e) => {
                if (e.checked) {
					if(e.Number == e.max){
						num += e.AllPrice
					}else{
						num += e.Number * e.OrgPrice
					}
                }
            })
            return Number(num).toFixed(2)
        },
    },

    onLoad(e) {
        this.id = e.id
        this.userId = e.userId
    },
    mounted() {
        this.getDetail()
        this.isShowBottomBar = true
    },
    methods: {
        getinputdata(data, index) {
            //更新步进器选择的值
			console.log(data)
			console.log(index)
            this.productData[index].Number = data
        },
        getDetail() {
            let param = {
                orderId: this.id,
                userId: this.userId,
            }
            GetOrderDetailListOnRefund(param).then((res) => {
				if(res.State==1){
					this.infodata = res.OtherData
					this.productData = res.Data
					this.productData.forEach((item, index) => {
						this.$set(item, "checked", false)
						this.$set(item, "whether", true)
						this.$set(item, "soleid", index + 1)
						this.$set(item, "max", item.Number)
						this.$set(item, "RefundNumber", item.Number)
						this.$set(item, "AllPrice", 0)
					})
					this.show = true
				}else{
					this.easyToast(res.Msg)
				}
            })
        },
        nextStep() {
            let param = {
                orderId: this.id,
                userId: this.userId,
            }
            var detailList = []
            this.selectData.forEach((item) => {
                var obj = {}
                obj.productId = item.ProductId
                obj.skuId = item.SkuId
                obj.number = item.Number
                obj.unitId = item.UnitId
                obj.unitName = item.UnitName
				obj.ratio = item.Ratio
				obj.refundPrice = item.OrgPrice
				obj.refundNumber = item.RefundNumber
                detailList.push(obj)
            })
            param.detailList = detailList
            AddRefundOrderAction(param).then((res) => {
                if (res.State == 1) {
                    this.easyGoTo("/pages_shop/packet/return/billDetail?id=" + this.id + "&userId=" + this.userId)
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        // 全选
        changeAll: function (e) {
            if (e.detail.value.length == 0) {
                this.productData.map((item) => this.$set(item, "checked", false))
                this.selectData = [] //选中的商品
                this.$set(this.allCheck, "checked", false)
            } else {
                this.productData.map((item) => this.$set(item, "checked", true))
                this.selectData = [] //选中的商品
                this.productData.forEach((item) => this.selectData.push(item))
                this.$set(this.allCheck, "checked", true)
            }
        },
        // 多选
        changeCheck: function (e) {
            var items = this.productData
            var len = this.productData.length
            var values = e.soleid
            for (var i = 0; i < len; i++) {
                var item = items[i]
                if (values == item.soleid) {
                    if (item.checked) {
                        item.checked = false
                    } else {
                        item.checked = true
                    }
                }
            }
            // 判断选中状态
            var arr = []
            this.productData.forEach((item) => (item.whether == true ? arr.push(item) : ""))
            this.selectData = [] //选中的商品
            this.productData.forEach((item) => (item.checked == true ? this.selectData.push(item) : ""))
            var isAll = arr.every((item) => item.checked == true)
            isAll ? this.$set(this.allCheck, "checked", true) : this.$set(this.allCheck, "checked", false)
        },
        getTotalNum() {
            let num = 0
            this.productData.forEach((e) => {
                num += e.Amount
            })
            return num
        },
    },
}
</script>

<style lang="scss" scoped>
.container {
    background-color: $uni-bg-color-grey;
}

.order-header {
    height: 240rpx;
    background: $app-color-main;
}

.order-main {
    margin-top: -200rpx;
    padding: 0 $app-page-padding $app-page-padding;

    .order-title {
        margin-bottom: 25rpx;

        text {
            font-weight: 400;
            font-size: $font-size-28;
            color: $color-white;
            display: block;
            padding: 10rpx 0 10rpx 32rpx;
        }
    }

    .order-user {
        padding: $app-page-padding;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .location {
            font-size: $font-size-28;
            padding-left: 14rpx;
        }

        .user-info {
            padding-right: 14rpx;
            display: flex;
            flex: 1;
            justify-content: flex-end;
            text {
                color: $app-color-text-main;
            }

            .user-info-name {
                font-size: $font-size-24;
                font-weight: 400;
            }

            .user-info-location {
                font-size: $font-size-32;
                line-height: 32rpx;
                font-weight: 400;
                color: #fe0000;
            }
        }
    }

    .order-items {
        // padding: 30rpx $app-page-padding 1rpx;
    }

    .order-info {
        display: flex;
        flex-direction: column;
        .order-info-item {
            padding: 14rpx $app-page-padding;
            display: flex;
            flex-direction: row;
            text {
                font-size: $font-size-24;
            }
            .label {
                color: $app-color-text-tip;
                margin-right: 10rpx;
            }
            .value {
                color: $app-color-text-main;
            }
            .order-info-image {
                width: 122rpx;
                height: 122rpx;
            }
        }
    }
}
.bottom-bar {
    justify-content: space-between;
    z-index: 2;
    .price {
        font-size: $font-size-28;
        text {
            font-size: $font-size-30;
            font-weight: 500;
            color: #fe0000;
        }
    }
    .btn {
        width: 220rpx;
        padding: 0;
        font-size: $font-size-30;
        height: 80rpx;
    }
    .text {
        padding-left: 10rpx;
    }
}
.flex {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.flex_end {
    display: flex;
    justify-content: flex-end;
}
.flex_culmu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 20rpx;
}
.disabled {
    border: none;
}
</style>
